<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="viewport-fit=cover,width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
		<link href="../../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../../css/reset.css" />
		<link rel="stylesheet" href="../../../css/style.css" />
	</head>

	<body>
		<div id="refreshContainer">
			<div id="book_detail" v-cloak>
				<header class="mui-bar mui-bar-nav">
					<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
					<h1 class="mui-title">书籍详情</h1>
					<!--<a class="icon_share_mall" @tap="ebookShare"><img src="../../../images/icon_share_mall.png"/></a>-->
				</header>
				<div class="mui-content getHeight">
					<div class="eBookDetail">
						<div class="eBook_box1">
							<div class="eBook_left">
								<img class="eBook_dpic" :src="details.thumb" alt="" />
								<!--<img class="icon_tejia" src="../../../images/icon_tejia.png"/>-->
							</div>
							<div class="eBook_right">
								<h3>{{details.title}}</h3>
								<div class="readCollection">
									<div class="readNum">
										<p>{{details.views}}</p>
										<span>阅读</span>
									</div>
									<div class="rc_line"></div>
									<div class="collectNum">
										<p>{{details.collection_num}}</p>
										<span>收藏</span>
									</div>
								</div>
							</div>
						</div>
						<div class="view_catalog" @tap="open_book_mulu(details.id,details.buy_status)">
							<h3>查看目录</h3>
							<a><img class="arr_right" src="../../../images/arr_right.png"/></a>
						</div>
						<div class="eBook_nr" v-html="details.description">
						</div>
					</div>
				</div>

				<!--未购买状态-->
				<div class="fix_price" v-if="details.vipprice != 0 && details.buy_status == 'NO'">
					<div class="fix_box">
						<div class="fix_lp bookPrice w30p" @tap="open_price_box">
							<p>
								<span><em>￥</em>{{details.novipprice}}</span>
							</p>
							<p>
								<span class="fix_priceVip"><em class="fix_vip">VIP价:</em><em>￥</em>{{details.vipprice}}</span>
							</p>
						</div>
						<div class="fix_mp">
							<p class="qq_kefu" @tap="openKefu">
								<a class="mui-icon mui-icon-consultation"></a>
								<span>客服</span>
							</p>
							<p class="favorite" @tap="get_shoucang()">
								<a v-if="collection_status == 'NO'" class="mui-icon mui-icon-collect"></a>
								<a v-if="collection_status == 'YES'" class="mui-icon mui-icon-collected orange"></a>
								<span class="sc_txt" :style="styleObject">收藏</span>
							</p>
						</div>
						<div class="bookDetailBtn">
							<div class="fix_rp w50p">
								<a class="buyBtn tryRead" @tap="open_shidu(details.id)">试读</a>
							</div>
							<div class="fix_rp w50p">
								<a class="buyBtn buyRead" @tap="open_price_box">购买</a>
							</div>
						</div>	
					</div>
				</div>

				<!--已购买状态-->
				<div class="fix_price" v-if="details.vipprice != 0 && details.buy_status == 'YES'">
					<div class="fix_box">
						<div class="fix_mp w40p">
							<p class="qq_kefu" @tap="openKefu">
								<a class="mui-icon mui-icon-consultation"></a>
								<span>客服</span>
							</p>
							<p class="favorite" @tap="get_shoucang(details.id,details.title)">
								<a v-if="collection_status == 'NO'" class="mui-icon mui-icon-collect"></a>
								<a v-if="collection_status == 'YES'" class="mui-icon mui-icon-collected orange"></a>
								<span class="sc_txt" :style="styleObject">收藏</span>
							</p>
						</div>
						<div class="fix_rp redBtn">
							<a class="readBtn toRead" @tap="open_read(details.id,details.buy_status)">阅读</a>
						</div>
					</div>
				</div>

				<!--免费的的书-->
				<div class="fix_price" v-if="details.vipprice == 0">
					<div class="fix_box">
						<div class="fix_mp w40p">
							<p class="qq_kefu" @tap="openKefu">
								<a class="mui-icon mui-icon-consultation"></a>
								<span>客服</span>
							</p>
							<p class="favorite" @tap="get_shoucang(details.id,details.title)">
								<a v-if="collection_status == 'NO'" class="mui-icon mui-icon-collect"></a>
								<a v-if="collection_status == 'YES'" class="mui-icon mui-icon-collected orange"></a>
								<span class="sc_txt" :style="styleObject">收藏</span>
							</p>
						</div>
						<div class="fix_rp redBtn">
							<a class="readBtn toRead" @tap="open_read(details.id,details.buy_status)">免费阅读</a>
						</div>
					</div>
				</div>

				<!--分享弹窗-->
				<div class="popMask" @tap="close_pay_box"></div>

				<!--选择支付方式-->
				<div class="popPay">
					<div class="popCont">
						<div class="pop_tt">
							<span class="colsePay" @tap="close_pay_box"><img src="../../../images/pay_close.png" alt="" /></span>
							<h4>选择支付方式</h4>
						</div>
						<div class="pay_way">
							<ul class="mui-table-view mui-table-view-radio">
								<li class="mui-table-view-cell  mui-selected" @tap="pay_way('wxpay')">
									<a class="mui-navigate-right"><em class="wx_bg"></em>微信</a>
								</li>
								<li class="mui-table-view-cell" @tap="pay_way('alipay')">
									<a class="mui-navigate-right"><em class="zfb_bg"></em>支付宝</a>
								</li>
							</ul>
						</div>
						<div class="useBtn" @tap="open_zhifu">
							<a>确认支付</a>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script type="text/javascript" src="../../../js/mui.min.js"></script>
		<script type="text/javascript" src="../../../js/h.min.js" ></script>
		<script type="text/javascript" src="../../../js/jquery.min.js" ></script>
		<script type="text/javascript" src="../../../js/vue.js"></script>
		<script type="text/javascript" src="../../../js/plusShare.js"></script>
		<script type="text/javascript" src="../../../js/public.js"></script>
		<script type="text/javascript" src="../../../js/pay.js"></script>
		<script type="text/javascript" src="../../../js/tpl/eBookDetail.js"></script>
	</body>

</html>